<template>
  <div class="page">
    <m-header :title="langText&&langText.myteam" :canback="Boolean(1)"></m-header>
    <div class="body">
      <div class="allNum">
        <div>
          <p>{{langText&&langText.totalteamdeposit}}</p>
          <p>{{totalAchievement}} {{langText&&langText.usdt}}</p>
        </div>
        <div >
          <p>{{langText&&langText.numberofteams}}</p>
          <p>{{num2}} {{langText&&langText.people}}</p>
        </div>
      </div>
      

      
      <div class="wrap_top">
        <span>{{straight?langText&&langText.directpush + ` (${num})`:langText&&langText.push+ ` (${num})`}}  </span>
        <!-- <i class="iconfont iconwenhao mark"></i> -->
        
        <div class="span_right_icon" @click="changeStraight">
              <p>
              <i class="iconfont iconshang mark"></i>
            </p>
            <p>
              <i class="iconfont iconxia mark"></i>
            </p>
        </div>
      </div>

      <table
        class="wrap"
        v-lazy-load="lazyLoad"
      >

        <tr class="list">
          <th>{{langText&&langText.name}}</th>
          <th>{{langText&&langText.mailbox}}</th>
          <th>{{langText&&langText.grade}}</th>
          <!-- <th>身份</th> -->
          <th>{{langText&&langText.totalperformance}}</th>
          <th>{{langText&&langText.registrationtime}}</th>
        </tr>
        <tr class="list" v-for="(item,index) in memberInfo" :key="index">
          <!-- <td>{{item.realname}}</td> -->
          <td>{{item.realname}}</td>
          <td>{{item.email}}</td>
          <!-- <td>13232630108</td> -->
          <td>{{item.level}}</td>
          <!-- <td>{{item.identity}}</td> -->
          <td>{{item.credit2acc}}{{langText&&langText.usdt}}</td>
          <td>{{(item.createtime).substring(0,10)}}</td>
        </tr>
      </table>
      <div class="list_bot"></div>
    </div>
  </div>
</template>
<script>
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      allTxt:null,
      memberInfo: [],
      page: 1,
      num2:null,
      num: null,
      noMore: false,
      screenHeight: 667,
      totalAchievement:null,
      langText:null,
      straight:true
    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    this.getTeam();
    this.screenHeight = window.screen.availHeight;
  },
  mounted(){
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
  },
  methods: {
    getTeam() {
      Owner.getTeam().then(res => {
        if (res.code == 1) {
          // if (res.data.page > res.data.allPage) {
          //   this.noMore = true;
          // }
          // this.memberInfo = this.memberInfo.concat(res.data.memberInfo,res.data.memberInfo);
          // this.num = res.data.num;
          this.num = this.straight?res.data.memberInfo.directMemberNum:res.data.memberInfo.indirectMemberNum;
          this.num2 = res.data.memberNum;
          this.memberInfo = this.straight?res.data.memberInfo.directMember:res.data.memberInfo.indirectMember;
          this.totalAchievement = res.data.totalAchievement;
        }
      });
    },
    lazyLoad() {
      this.page = this.page + 1;
      if (!this.noMore) {
        // this.loadGif = true;
        this.getTeam();
      }
    },
    changeStraight(){
      this.straight = !this.straight;
      this.getTeam();
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // padding: 15px;
  background-color: @bg-color;
  font-size: 30px;
  .allNum {
    height: 257px;
    // padding: 30px;
    text-align: center;
    background: #4EB6AD;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding:64px 0 73px;
    >div{
      flex: 1;
      text-align: center;
      >p{
        &:first-child{
          font-weight: 400;
          margin-top: 5px;
          font-size:28px;
        }
        &:last-child{
          margin-top: 17px;
          font-size:44px;
        }
      }
      &:last-child{
        border-left: 1px solid rgba(255, 255, 255, 0.6);
      }
    }
  }
  
  .wrap_top{
    display: flex;
    margin-top: 60px;
    justify-content: space-between;
    background-color: #fff;
    margin-left: 20px;
    width: 710px;
    border-bottom: 1px solid #dddddd;
    height: 88px;
    line-height: 88px;
    border-radius: 10px 10px 0 0;
    position: relative;
    
    .span_right_icon{
      display: inline-block;
      position: absolute;
      right: 30px;
      top: -12px;
      p{ 
        color: #AAAAAA;
        height: 14px;
        &:last-child{
          margin-top: 4px;
        }
        }
      i{
        font-size: 20px;
        line-height: 0;
      }
    }
    >span{
        flex: none;
        color: #4EB6AD;
        font-size:32px;
        margin-left: 26px;
    }
    
    >i{
      flex: none;
      margin-right: 21px;
    }
  }
  .wrap {
    width: 710px;
    margin-left: 20px;
    // border-radius: 10px;
    background-color: #fff;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    // padding: 0 20px;
    .list {
      // padding: 20px 0;
      // .display-flex();
      height: 66px;
      color: #999999;
      display: flex;
      line-height: 66px;
      &:first-child{ 
        color: #000;
        border-bottom: 1px solid #eee;
      }
      td {
        text-align: center;
        font-size: 24px;
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap
        
      }
      th{
        flex: 1;
        font-weight: 500;
        font-size: 24px;
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap
      }
    }
    .listNo {
      padding: 15px 0;
      text-align: center;
    }
  }
  .list_bot{
    width: 710px;
    margin-left: 20px;
    border-radius: 10px;
    height: 20px;
    background-color: #fff;
    margin-bottom: 30px;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>